<template>
  <div class="">
	<iw-header></iw-header>
    <h1>详情</h1>
	<h1>上传头像</h1>
	<!-- 文件输入框是只读的，不可以进行v-model数据的绑定 -->
	<span>请选择上传的文件</span>
	<input  type="file" @change="doFileChange($event)">
	<br>
	<button @click="doFileUpload()">执行文件上传</button>
	

		

	<iw-footer></iw-footer>
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '@/components/Footer.vue';
export default {
	data:()=>{
		return {
			avatarFile:null
		}
	},
	methods:{
		//处理选中的文件改变
		doFileChange(e){
			console.log("选中的文件",e.target);//输出事件源对象
			// js中提供的与文件操作相关的API
			//取出文件
			this.avatarFile=e.target.files[0];
		},
		doFileUpload(){
			//执行异步文件上传--把用户选中的图片文件上传给后端服务器
			//XMLHttpRequest  level2级接口
			let data=new FormData();  //表单数据
			data.append('desc','这是我的头像文件');//将哟啊提交给服务器的字符数据
			data.append("avatar",this.avatarFile);//将要提交给服务器的文件数据
			let config={//包含文件上传字段的HTTP请求消息，内容类型必须是
				headers:{'Content-Type':'multipart/form-data'}
			}
			this.$http.post('/user/upload/avatar',data,config).then(res=>{
				console.log(res);
				alert("上传成功")
			}).catch(err=>{
				console.log(err);
			})
		}
	},
	components:{
		'iw-header':Header,
		'iw-footer':Footer
	}
}	
</script>

<style>
	
</style>
